<template>
  <div class="satellite-demo">
    <div ref="mapContainer" class="map-container"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import Map from '../../../packages';

const mapContainer = ref(null);
let map = null;
let satelliteEntity = null;

// 配置项：轨道点（经纬高）和速度（固定值）
const orbitPoints = [
  // 180个点，严格单调递增，经度-180到180，倾角45°，闭合
  [-180.00, 0.00, 420000],
  [-178.00, 1.11, 420000],
  [-176.00, 2.22, 420000],
  [-174.00, 3.32, 420000],
  [-172.00, 4.41, 420000],
  [-170.00, 5.50, 420000],
  [-168.00, 6.58, 420000],
  [-166.00, 7.65, 420000],
  [-164.00, 8.71, 420000],
  [-162.00, 9.76, 420000],
  [-160.00, 10.80, 420000],
  [-158.00, 11.83, 420000],
  [-156.00, 12.85, 420000],
  [-154.00, 13.86, 420000],
  [-152.00, 14.86, 420000],
  [-150.00, 15.84, 420000],
  [-148.00, 16.81, 420000],
  [-146.00, 17.77, 420000],
  [-144.00, 18.71, 420000],
  [-142.00, 19.64, 420000],
  [-140.00, 20.55, 420000],
  [-138.00, 21.45, 420000],
  [-136.00, 22.33, 420000],
  [-134.00, 23.20, 420000],
  [-132.00, 24.05, 420000],
  [-130.00, 24.88, 420000],
  [-128.00, 25.70, 420000],
  [-126.00, 26.50, 420000],
  [-124.00, 27.28, 420000],
  [-122.00, 28.05, 420000],
  [-120.00, 28.80, 420000],
  [-118.00, 29.53, 420000],
  [-116.00, 30.24, 420000],
  [-114.00, 30.93, 420000],
  [-112.00, 31.61, 420000],
  [-110.00, 32.26, 420000],
  [-108.00, 32.90, 420000],
  [-106.00, 33.51, 420000],
  [-104.00, 34.10, 420000],
  [-102.00, 34.67, 420000],
  [-100.00, 35.22, 420000],
  [-98.00, 35.75, 420000],
  [-96.00, 36.25, 420000],
  [-94.00, 36.73, 420000],
  [-92.00, 37.19, 420000],
  [-90.00, 37.62, 420000],
  [-88.00, 38.03, 420000],
  [-86.00, 38.41, 420000],
  [-84.00, 38.77, 420000],
  [-82.00, 39.10, 420000],
  [-80.00, 39.41, 420000],
  [-78.00, 39.69, 420000],
  [-76.00, 39.94, 420000],
  [-74.00, 40.17, 420000],
  [-72.00, 40.37, 420000],
  [-70.00, 40.54, 420000],
  [-68.00, 40.69, 420000],
  [-66.00, 40.81, 420000],
  [-64.00, 40.90, 420000],
  [-62.00, 40.97, 420000],
  [-60.00, 41.01, 420000],
  [-58.00, 41.02, 420000],
  [-56.00, 41.01, 420000],
  [-54.00, 40.97, 420000],
  [-52.00, 40.90, 420000],
  [-50.00, 40.81, 420000],
  [-48.00, 40.69, 420000],
  [-46.00, 40.54, 420000],
  [-44.00, 40.37, 420000],
  [-42.00, 40.17, 420000],
  [-40.00, 39.94, 420000],
  [-38.00, 39.69, 420000],
  [-36.00, 39.41, 420000],
  [-34.00, 39.10, 420000],
  [-32.00, 38.77, 420000],
  [-30.00, 38.41, 420000],
  [-28.00, 38.03, 420000],
  [-26.00, 37.62, 420000],
  [-24.00, 37.19, 420000],
  [-22.00, 36.73, 420000],
  [-20.00, 36.25, 420000],
  [-18.00, 35.75, 420000],
  [-16.00, 35.22, 420000],
  [-14.00, 34.67, 420000],
  [-12.00, 34.10, 420000],
  [-10.00, 33.51, 420000],
  [-8.00, 32.90, 420000],
  [-6.00, 32.26, 420000],
  [-4.00, 31.61, 420000],
  [-2.00, 30.93, 420000],
  [0.00, 30.24, 420000],
  [2.00, 29.53, 420000],
  [4.00, 28.80, 420000],
  [6.00, 28.05, 420000],
  [8.00, 27.28, 420000],
  [10.00, 26.50, 420000],
  [12.00, 25.70, 420000],
  [14.00, 24.88, 420000],
  [16.00, 24.05, 420000],
  [18.00, 23.20, 420000],
  [20.00, 22.33, 420000],
  [22.00, 21.45, 420000],
  [24.00, 20.55, 420000],
  [26.00, 19.64, 420000],
  [28.00, 18.71, 420000],
  [30.00, 17.77, 420000],
  [32.00, 16.81, 420000],
  [34.00, 15.84, 420000],
  [36.00, 14.86, 420000],
  [38.00, 13.86, 420000],
  [40.00, 12.85, 420000],
  [42.00, 11.83, 420000],
  [44.00, 10.80, 420000],
  [46.00, 9.76, 420000],
  [48.00, 8.71, 420000],
  [50.00, 7.65, 420000],
  [52.00, 6.58, 420000],
  [54.00, 5.50, 420000],
  [56.00, 4.41, 420000],
  [58.00, 3.32, 420000],
  [60.00, 2.22, 420000],
  [62.00, 1.11, 420000],
  [64.00, 0.00, 420000],
  [66.00, -1.11, 420000],
  [68.00, -2.22, 420000],
  [70.00, -3.32, 420000],
  [72.00, -4.41, 420000],
  [74.00, -5.50, 420000],
  [76.00, -6.58, 420000],
  [78.00, -7.65, 420000],
  [80.00, -8.71, 420000],
  [82.00, -9.76, 420000],
  [84.00, -10.80, 420000],
  [86.00, -11.83, 420000],
  [88.00, -12.85, 420000],
  [90.00, -13.86, 420000],
  [92.00, -14.86, 420000],
  [94.00, -15.84, 420000],
  [96.00, -16.81, 420000],
  [98.00, -17.77, 420000],
  [100.00, -18.71, 420000],
  [102.00, -19.64, 420000],
  [104.00, -20.55, 420000],
  [106.00, -21.45, 420000],
  [108.00, -22.33, 420000],
  [110.00, -23.20, 420000],
  [112.00, -24.05, 420000],
  [114.00, -24.88, 420000],
  [116.00, -25.70, 420000],
  [118.00, -26.50, 420000],
  [120.00, -27.28, 420000],
  [122.00, -28.05, 420000],
  [124.00, -28.80, 420000],
  [126.00, -29.53, 420000],
  [128.00, -30.24, 420000],
  [130.00, -30.93, 420000],
  [132.00, -31.61, 420000],
  [134.00, -32.26, 420000],
  [136.00, -32.90, 420000],
  [138.00, -33.51, 420000],
  [140.00, -34.10, 420000],
  [142.00, -34.67, 420000],
  [144.00, -35.22, 420000],
  [146.00, -35.75, 420000],
  [148.00, -36.25, 420000],
  [150.00, -36.73, 420000],
  [152.00, -37.19, 420000],
  [154.00, -37.62, 420000],
  [156.00, -38.03, 420000],
  [158.00, -38.41, 420000],
  [160.00, -38.77, 420000],
  [162.00, -39.10, 420000],
  [164.00, -39.41, 420000],
  [166.00, -39.69, 420000],
  [168.00, -39.94, 420000],
  [170.00, -40.17, 420000],
  [172.00, -40.37, 420000],
  [174.00, -40.54, 420000],
  [176.00, -40.69, 420000],
  [178.00, -40.81, 420000],
  [180.00, -40.81, 420000]
];
const satelliteImg = () => import('@/assets/images.jpg');
const speed = 5; // 固定速度，度/秒

onMounted(async () => {
  map = new Map(mapContainer.value, {
    scene: {
      center: { lng: 120, lat: 40, alt: 1000000, pitch: 0 },
      zoom: 1.5
    },
    style: 'https://demotiles.maplibre.org/style.json',
    type: 'globe',
    controller: ['globe', 'showZoom', 'showCompass', 'visualizePitch', 'fullscreen']
  });
  satelliteEntity = new Map.Graphic.SatelliteEntity({
    orbitPoints,
    speed,
    currentPosition: [100, 20], // 指定卫星初始经纬度
    satelliteStyle: {
      image: await satelliteImg(),
      width: 48,
      height: 48,
      label: {
        text: '卫星',
        font_size: 14,
        color: '#fff',
        font_weight: 'bold',
        pixelOffsetY: 50
      }
    },
    orbitStyle: {
      width: 3,
      color: '#ffff00',
      opacity: 0.7
    }
  });
  map.addGraphic(satelliteEntity);
  satelliteEntity.start(); // 实例化后自动开始运动
});

onBeforeUnmount(() => {
  satelliteEntity && satelliteEntity.pause();
  if (map) map.destroy();
});
</script>

<style scoped>
.satellite-demo {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.map-container {
  width: 100%;
  height: 100%;
}
</style> 